<template>
  <div class="indetification" >
    <!--填资进度条-->
    <nav-bar :position="'additional'" :status="status" />
    <div v-show="false">
      <doFaceButton ref="checkFaceInfo"/>
    </div>
    <!-- 'failure':form.faceValid === 2, -->
    <div @click="goFaceCheck"  class="face" :class="{'authorize':isShowFace,'success':!form.isShowFace}">
      <div >{{ $t('faceCheck') }}</div>
      <p :class="{'done': !isShowFace}" />
      <div class="right">
        <span v-if="isShowFace" class="btn-ui">{{ $t('authorize') }}</span>
        <span v-else class="status-done btn-ui">{{ $t('success') }}</span>
        <!-- <span v-if="form.faceValid === 2" class="status-fail">{{ $t('failure') }}</span> -->
      </div>
    </div>

    <!-- 证件照位置移动到第五步2021-05-11 form.identificationType -->
    <div class="bottom-info" v-show="showUpFront">
      <div class="title" v-show="showUpFront">Upload the photo of ID card(must upload)</div>
      <div v-if="true" class="image-content" v-show="showUpFront">
        <!--证件正面照片-->
        <div class="main">
          <div class="photo-box">
            <div ref="cardPositiveImg" class="sort">
              <!-- :isIDImg='true'  v-model="form.cardPositiveImg" :disabled="readonly||lockInfo" :title="$t('frontSideOfYourID')"> -->
              <upload-image
                :pageTrackerInfo="pageTrackerInfo"
                :isIDImg='true' v-model="form.cardPositiveImg" :disabled="readonly" >
<!--                :title="$t('frontSideOfYourID')"-->
              </upload-image>

<!--              <upload-image-->
<!--                :isIDImg='true' :disabled="readonly" :title="$t('frontSideOfYourID')">-->
<!--              </upload-image>-->

            </div>
          </div>
        </div>
      </div><!--手持证件照片-->

      <p class="front-slide-title" v-show="showUpFront">{{$t('frontSideOfYourID')}}</p>
    </div>

    <div class="btn-box">
      <button @click="submitHandler('submit')"
              :disabled="btnCanSubmit || disabledBtn || readonly "
              class="submitBtn btn-ui">{{ btnName }}</button>
    </div>

  </div>
</template>

<script src="./main.js"></script>

<style lang="scss" scoped>
@import "~@/assets/scss/function";
@import "../index";
@import "./index";
</style>
